<template>
  <div>
    <el-button type="primary">新增角色</el-button>
    <el-table :data="roles">
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="角色名称" prop="name"></el-table-column>
    <el-table-column label="描述" prop="description"></el-table-column>
    <el-table-column label="权限" prop="permissions"></el-table-column>
    <el-table-column label="状态" prop="status"></el-table-column>
    <el-table-column label="操作" prop="action"></el-table-column>
  </el-table>
  <el-pagination
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="[10, 20, 30, 40]"
  />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElPagination,ElCard,ElButton } from 'element-plus';

interface Role {
  id: number;
  name: string;
  description: string;
  permissions: string[];
  status: 'active' | 'inactive';
}

const roles = ref<Role[]>([
  { id: 1, name: '管理员', description: '系统管理员，拥有所有权限', permissions: ['用户管理', '角色管理', '菜单管理'], status: 'active' },
  { id: 2, name: '普通用户', description: '普通用户，拥有基础权限', permissions: ['个人信息'], status: 'active' },
  { id: 3, name: '访客', description: '只读权限，无修改权限', permissions: [], status: 'inactive' }
]);
</script>

<style scoped>

</style>